@extends('layouts.header')
@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 共享文件 <span class="c-gray en">&gt;</span> 文件管理 <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <div class="page-container">
        <div class="cl pd-5 bg-1 bk-gray">
            <span class=" ml-20">
                总容量:<i class="c-red">{{$data['dirCap']}}</i> &nbsp;&nbsp;&nbsp;  剩余容量
                :<i class="c-red">{{$data['dirLeftCap']}}</i>
            </span>
        </div>
        <form class="mt-10 form form-horizontal " id="form" method="POST" enctype="multipart/form-data">
            <div class="row cl">
                <label class="form-label col-sm-3 ">文件：</label>
                <div class="formControls col-sm-8">
                    <span class="btn-upload form-group">
                        <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly required> <a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                        <input type="file" multiple name="file" class="input-file">
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3 ">标准代号：</label>
                <div class="formControls col-sm-6">
                    <select  name="std_num" class="select2 input-text" style="width:100%;" >
                        <option value="">--请选择--</option>
                        @foreach($data['stds'] as $stdNum)
                        <option value="{{$stdNum}}">{{$stdNum}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @csrf
            <div class="row cl  text-c">
                <span class="btn btn-primary radius" id="sub">提交</span>
                <span class="btn btn-primary radius ml-15" id="sync">同步已有文件</span>
            </div>
        </form>
        <div class="mt-10">
            <table class="table table-border table-bordered table-hover table-bg" id="datatable">
                <thead>
                    <tr class="text-c">
                        <!-- <th><input type="checkbox" id="checkAll"></th> -->
                        <th>序号</th>
                        <th>文件号</th>
                        <th style="width:40%;" >文件名称(enter保存)</th>
                        <th style="width:20%;" >标准代号(切换自动保存)</th>
                        <th>文件大小</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data['files'] as $i => $file)
                    <tr class="text-c">
                        <!-- <td><input type="checkbox" ></td> -->
                        <td>{{$i+1}}</td>
                        <td>{{strstr($file->filename,'-',1)}}</td>
                        <td class="file text-l">
                            <span class="hidden">{{$file->filename}}</span>
                            <input class="input-text" type="text" name="filename" value="{{$file->filename}}" onkeyup="save(this,'{{$file->id}}')">
                        </td>
                        <td class="std_num"><span class="hidden">{{$file->std_num}}</span>
                            <select  name="std_num" class="select2 input-text" style="width:100%;" onchange="save(this,'{{$file->id}}',1)">
                                <option value="">--请选择--</option>
                                @foreach($data['stds'] as $stdNum)
                                <option value="{{$stdNum}}" @if($stdNum == $file->std_num) selected @endif>{{$stdNum}}</option>
                                @endforeach
                            </select>
                            <!-- <input class="input-text" type="text" name="std_num" value="{{$file->std_num}}" onkeyup="save(this,'{{$file->id}}','{{$file->std_num}}')"></td> -->
                        <td class="file_size">
                            @php
                                $oldSize = $file->file_size;
                                $size = floor($oldSize/1024/1024) > 0 ? number_format($oldSize/1024/1024,2).'M' : (floor($oldSize/1024) > 0 ? number_format($oldSize/1024,2).'KB' : $oldSize.'B');
                            @endphp
                            {{$size}}
                        </td>
                        <td>{{substr($file->create_at,0,10)}}</td>
                        <td>
                            <span class="btn btn-danger radius size-MINI" onclick="del(this,'{{$file->id}}')">删除</span>
                            <!-- <a class="btn btn-primary radius size-MINI" onclick="toOpen(`{{asset('storage/'.$file->path)}}`)">打印预览</a> -->
                            <!-- <a class="btn btn-primary radius size-MINI" href="preview?id={{$file->id}}" target="_blank" >打印预览</a> -->
                            <a class="btn btn-primary radius size-MINI" download="{{$file->filename}}" href="{{asset('storage/'.$file->path)}}"><i class="Hui-iconfont">&#xe640;</i>下载</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.select2').select2();
            $('#datatable').DataTable();
        })
        function del(obj,id){
            ajax('post','del',{id:id},delBak);
            function delBak(res) {
                parseInt(res) == 1 ? $(obj).closest('tr').remove() : '';
            }
        }

        function save(obj,id,autoSave=0){
            let value = $(obj).val()
                ,name = $(obj).attr('name');
            if (event.which == 13 || autoSave == 1) {
                ajax('post','edit',{'name':name,'value':value,'id':id});
            }
        }

        $('#sub').on('click',function (event) {
            if (!$('#form').valid()) {
                layer.msg('验证失败！');
                return false;
            }
            event.preventDefault();
            let form=$('#form')[0], formData = new FormData(form);
            ajax('post','add',formData,addBak,1,1,false,false);
            function addBak(res) {
                if (res == 1) {
                    location.reload();
                }
            }
        })

        $('#sync').on('click',function (event) {
            event.preventDefault();
            ajax('get','sync',{},syncBak,0);
            function syncBak(res) {
                if (res == 1) {
                    layer.msg('操作成功！');
                    location.reload();
                }else{
                    layer.msg('没有需要同步的文件~');
                }
            }
        })

        function toOpen(href) {
            // src就是要实现预览的文件地址*//*具体文档看这微软接口文档*/ /*补充：google的文档在线预览实现同微软（资源必须是公共可访问的）*/<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
            window.open(href+'?downloadType=inline');
        }
    </script>
@endsection